<!-- ref作用 -->
<template>
  <view>
    计数器:{{ count }}
    <button @click="count++">增加1</button>

    <button @click="addCount">增加10</button>
  </view>

  <view> 用户名：{{ user.name }} </view>
  <view>
    年龄：{{ user.age }}
    <button type="default" @click="addOne">一年又一年</button>

    <button type="default" @click="updateUser">修改整个响应式对象</button>
  </view>
</template>

<script setup>
  /*
   注意点：
    1. ref定义的响应式数据如果在函数里面修改其值，是需要.value的形式
    2. 通过ref定义的响应式数据（复杂类型）直接覆盖赋值以后也能让视图重新刷新
  */
  import { ref } from 'vue'
  const count = ref(0) // 定义一个简单类型的响应是数据

  const user = ref({ name: 'tom', age: 21 }) //定义了一个复杂类型的响应式数据

  function addCount() {
    count.value += 10
  }

  function addOne() {
    user.value.age++
  }

  function updateUser() {
    user.value = { name: 'jim', age: 18 }
  }
</script>

<!-- reactive定义响应式数据演示 -->
<!-- <template>
  <view> 用户名：{{ user.name }} </view>
  <view>
    年龄：{{ user.age }}
    <button type="default" @click="addOne">一年又一年</button>
  </view>
</template> -->

<!-- setup语法糖 -->

// // 1. 导入响应式函数 // /* // 注意点： // 1.
reactive只能接收一个复杂类型的参数，因为它不支持简单类型的响应式数据包装处理 //
2. 经过reactive处理的响应式数据，直接复制是不会驱动视图数据刷新的 // */ //
import { reactive } from 'vue' // // 2. 将一个普通对象转换成响应式对象返回 //
let user = reactive({ name: 'tom', age: 20 }) // // 3.
定义一个函数用户点击按钮的时候将user中的age加一 // function addOne() { // //
修改响应式数据user中的age // user.age++ // // user.name = 'jim' // // user = {
name: 'jim', age: 18 } // } // // vue的核心思想：数据的改变驱动视图的改变 // //
1. 定义响应式数据（基本类型(string,number,boolen)，复杂类型({},[])） // // 2.
定义函数来操作响应式数据（响应数据一旦改变就会自动触发视图中的内容改变） // //
import { ref } from 'vue' // ref就是一个组合式api // // // 定义响应式数据count
// // const count = ref(0) // // // 方法 // // const increment = () => { // //
// 修改响应式数据count的值 // // count.value++ // // } // //

<!-- <style></style> -->

<!-- vue3 组合式复杂写法 -->
<!-- <template>
  <view> 计数器：{{ count }} <button @click="increment">累加</button> </view>
</template>

<script>
  import { ref } from 'vue' // ref就是一个组合式api
  export default {
    setup() {
      // 定义响应式数据count
      const count = ref(0)
      // 方法
      const increment = () => {
        count.value++
      }

      // 导出
      return { count, increment }
    },
  }
</script>

<style></style> -->

<!-- vue中选项是api的写法 -->
<!-- <template>
  <view> 计数器：{{ count }} <button @click="increment">累加</button> </view>
</template>

<script>
  export default {
    data() {
      return {
        count: 0, // vue2中定义响应式数据count
        user:{name:'tom',age:20}
      }
    },
    methods: {
      increment() {
        this.count++
      },
    },
  }
</script>

<style></style -->
>
